<extend name="Public/base"/>
<block name="style">
    <style type="text/css">
        .modal-backdrop{ z-index: 1;}
        .modal-backdrop.in{ opacity: 0;}

        #editModal .modal-body .editModal-box{
            border-bottom:1px #ccc dotted;
            padding-bottom:5px;
            margin-bottom:5px;
        }
        #editModal .modal-body .editModal-title{
            float:left;
            width:60px;
        }

        #editModal .modal-body .editModal-body{
            margin-left:60px;
            
        }
        #editModal .modal-body .editModal-body .editInput{
            width:80px;
            margin:2px;
            display:inline-block;
        }
        #editModal .modal-body .editModal-body .tableList {
            display:inline-block;
        }
        #editModal .modal-body .editModal-body .addTable {
            margin:2px;
            width:121px;
        }
    </style>
</block>
<block name="body">

    <div class="main-title">
        <h2>编辑商品规格</h2>
    </div>
    <div class="with-padding">
        <button class="btn btn-info add-sku" data-toggle="modal" data-target="#addModal" style="margin-bottom: 5px">添加规格</button>
        <button class="btn btn-info add-sku" data-toggle="modal" data-target="#editModal" style="margin-bottom: 5px">编辑规格</button>
        <button class="btn btn-danger refresh-sku" onclick="refresh_sku()"  style="margin-bottom: 5px">&nbsp;清空规程参数</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">添加规格</h4>
          </div>
          <div class="modal-body">
            <div><input type="text" class="form-control sku-type" placeholder="请输入规格类别"></div>
            <p>填规格类别，例如：颜色，尺寸</p>
            <div><input type="text" class="form-control sku-detail" placeholder="用逗号隔开"></div>
            <p>填详细分类，例如：红色，蓝色，紫色。</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="confirm-addsku-btn">确定</button>
          </div>
        </div>
      </div>
    </div>
    <!-- editModal -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">编辑规格</h4>
          </div>
          <div class="modal-body">
            
            
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="confirm-editsku-btn">确定</button>
          </div>
        </div>
      </div>
    </div>


    <div class="form-item">
        
            <div class="with-padding">
                <table class="table sku-table table-bordered">
                    <thead>
                        <tr>
                            <th id="thead-mark">售价，即支付价格（元）</th>
                            <th>原价（元）</th>
                            <th>库存（件）</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <div class="form-item with-padding">
                <input type="hidden" name="id" value="{$info.id|default=''}">
                <button class="btn " id="submit" type="submit" target-form="form-horizontal">确 定</button>
                <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
            </div>
    </div>
</block>

<block name="script">
    <script type="text/javascript">
        $(document).ready(function(){
            //保存数据
            tableSave = {};
            //初始化
    	    var product = {$product.sku_table|json_encode};
            if (product) {
                //product = product;
                //console.log(product);
                //遍历table对象
                for (var i in product['table']) {
                    var arr = [];
                    arr[0] = i;
                    arr[1] = product['table'][i];
                    buildTable(arr);
                    add_type_fnc();
                }

                //遍历info对象
                var len = $('.sku-table').find('.oldTr').length;
                var j = 0;
                for (var i in product['info']) {
                    j++;
                    $('.sku-table').find('.oldTr:eq('+(j-1)+')')
                                    .find('input[data-type="price"]').val(formatCurrency(product['info'][i]['price']/100));
                    $('.sku-table').find('.oldTr:eq('+(j-1)+')')
                                    .find('input[data-type="ori_price"]').val(formatCurrency(product['info'][i]['ori_price']/100));
                    $('.sku-table').find('.oldTr:eq('+(j-1)+')')
                                    .find('input[data-type="quantity"]').val(product['info'][i]['quantity']); 
                    //console.log('*************这是分界线***************');
                }
            }
            //导航高亮
            //highlight_subnav('{:U('index')}');
            //编辑规则弹出框html
            for (var key in product['table']) {
                var arr = [];
                var inpHtm='';
                arr[0] = key;
                arr[1] = product['table'][key];

                for(var j=0;j<arr[1].length;j++){
                    inpHtm +='<input class="form-control input-sm editInput" type="text" value='+arr[1][j]+' >';
                }

                html =  '<div class="editModal-box clearfix" data-type='+key+'>'+
                            '<div class="editModal-title" ><span>'+key+':</span></div>'+
                            '<div class="editModal-body">'+
                            '<div class="tableList">'+inpHtm+'</div>'+
                            '<div class="addTable">'+
                                '<div class="input-group">'+
                                '<input type="text" class="form-control input-sm">'+
                                    '<span class="input-group-btn">'+
                                    '<button class="btn btn-sm btn-danger" type="button">增加</button>'+
                                    '</span>'+
                                '</div>'+
                            '</div>'+
                            '</div>'+
                        '</div>';

                $('#editModal .modal-body').append(html);
            }
            //编辑弹出框新增按钮
            $('.addTable button').on('click',function(){
                var val = $(this).parent().parent().find('input').val();
                if(val){
                    var inputHtml = '<input class="form-control input-sm editInput" type="text" value='+val+' >';
                    var _p = $(this).parents('.editModal-body').find('.tableList');
                    $(_p).append(inputHtml);
                }
            })
            //编辑弹出框确认按钮
            $('#confirm-editsku-btn').on('click', function(){
                $('#editModal').modal('hide');
                var table = {};
                //var info = {};
                //重新组装table
                $('.editModal-box').each(function(){
                    //var str = '';
                    var _this = $(this);
                    var tabArr=[];
                    $(this).find('.tableList').find('input').each(function(){
                        
                        tabArr.push($(this).val());
                        table[_this.attr('data-type')]=tabArr;
                        
                    }) 
                });
                var thead = '<tr>'+
                            '<th id="thead-mark">售价，即支付价格（元）</th>'+
                            '<th>原价（元）</th>'+
                            '<th>库存（件）</th>'+
                            '<th></th>'+
                            '</tr>';
                $('.sku-table thead').html(thead);
                $('.sku-table tbody').html('');
                //alert('清空');
                for (var i in table) {
                    var arr = [];
                    arr[0] = i;
                    arr[1] = table[i];
                    buildTable(arr);
                    add_type_fnc();
                }

                //遍历info对象
                var len = $('.sku-table').find('.oldTr').length;
                for (var i=0;i<len;i++) {

                    var str='';
                    $('.sku-table').find('.oldTr:eq('+i+')').find('.firstTd').each(function(){
                        str+=$(this).attr('data-type')+':'+$(this).text();
                    });
                    str = str.replace(/\;$/,'');//去掉末尾的分号
                    
                    var _inputOne = $('.sku-table').find('.oldTr:eq('+i+')').find('input[data-type="price"]');
                    var _inputSec = $('.sku-table').find('.oldTr:eq('+i+')').find('input[data-type="ori_price"]');
                    var _inputThr = $('.sku-table').find('.oldTr:eq('+i+')').find('input[data-type="quantity"]');

                    if(product['info'][str]){
                        _inputOne.val(formatCurrency(product['info'][str]['price']/100));
                        _inputSec.val(formatCurrency(product['info'][str]['ori_price']/100));
                        _inputThr.val(product['info'][str]['quantity']); 
                    }else{
                        _inputOne.val(formatCurrency({$product['price']}/100));
                        _inputSec.val(formatCurrency({$product['ori_price']}/100));
                        _inputThr.val(0); 
                    }
                }
                $('#submit').click();
            })

            //新增弹出框确定按钮
            $('#confirm-addsku-btn').on('click', function(e){
                $('#addModal').modal('hide');
                var data = [];
                var sku_type = $('.sku-type').val();
                var sku_detail = $('.sku-detail').val();
                if(sku_type==''){
                    return;
                }
                if(sku_detail==''){
                    return;
                }
                sku_detail = sku_detail.replace(/，/gi,',');//将中文逗号替换成英文逗号
                sku_detail = sku_detail.split(',');
                data.push(sku_type);
                data.push(sku_detail);
                //console.log('创建table data',data);
                buildTable(data);   //创建表格
                add_type_fnc();     //追加标识
                //遍历表格并写入默认数据
                var len = $('.sku-table').find('.oldTr').length;
                //alert(len);
                for (var i=0;i<len;i++) {
                    var _inputOne = $('.sku-table').find('.oldTr:eq('+i+')').find('input[data-type="price"]');
                    var _inputSec = $('.sku-table').find('.oldTr:eq('+i+')').find('input[data-type="ori_price"]');
                    var _inputThr = $('.sku-table').find('.oldTr:eq('+i+')').find('input[data-type="quantity"]');
                    if(_inputOne.val()==0 || _inputOne.val()==''){
                        _inputOne.val(formatCurrency({$product['price']}/100));
                    }
                    if(_inputSec.val()==0 || _inputSec.val()==''){
                        _inputSec.val(formatCurrency({$product['ori_price']}/100));
                    }
                    _inputThr.val(0); 
                    //console.log('*************这是分界线***************');
                }
                //清空输入框
                $('.sku-type').val('');
                $('.sku-detail').val('');
                $('#submit').click();
            });

            $('#submit').on('click', function(e){
                e.preventDefault();
                var info = {};
                $('.sku-table').find('.oldTr').each(function(){
                    var str = '';
                    $(this).find('.firstTd').each(function(){
                        str+=$(this).attr('data-type')+':'+$(this).text()+';';
                    });
                    var price = $(this).children('.table-price').children('input[data-type="price"]').val();
                    var ori_price = $(this).children('.table-ori-price').children('input[data-type="ori_price"]').val();
                    var quantity = $(this).children('.table-quantity').children('input[data-type="quantity"]').val();
                    str = str.replace(/\;$/,'');//去掉末尾的分号
                    info[str] = {
                        price : price*100,
                        ori_price : ori_price*100,
                        quantity : quantity
                    }
                });
                //console.log(info);
                var data = {
	                id : {$product.id},
                    table : tableSave,
                    info : info
                }
                //console.log('data...',data);
                $.post("{:U('Muushop/product',array('action'=>'sku_table','id'=>$data['id']))}",data,function(data){
                    //console.log(data);
                    if (data.status == 1) {
                        if (data.url) {
                            updateAlert(data.info + ' 页面即将自动跳转~', 'success');
                        } else {
                            updateAlert(data.info, 'success');
                        }
                        setTimeout(function () {
                            if (data.url) {
                                location.href = data.url;
                            } else {
                                location.reload();
                            }
                        }, 1000);
                    } else {
                        updateAlert(data.info);
                        setTimeout(function () {
                            if (data.url) {
                                location.href = data.url;
                            } else {
                                $('#top-alert').find('button').click();
                            }
                        }, 1000);
                    }
                });  
            });
        });

        /**  
         * 将数值四舍五入(保留2位小数)后格式化成金额形式  
         * @param num 数值(Number或者String)  
         * @return 金额格式的字符串,如'1,234,567.45'  
         * @type String  
         */    
        function formatCurrency(num) {    
            num = num.toString().replace(/\$|\,/g,'');    
            if(isNaN(num))    
            num = "0";    
            sign = (num == (num = Math.abs(num)));    
            num = Math.floor(num*100+0.50000000001);    
            cents = num%100;    
            num = Math.floor(num/100).toString();    
            if(cents<10)    
            cents = "0" + cents;    
            for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)    
            num = num.substring(0,num.length-(4*i+3))+','+    
            num.substring(num.length-(4*i+3));    
            return (((sign)?'':'-') + num + '.' + cents);    
        }    

        //创建表格 每次接受一个数组 ['颜色',['红色','蓝色','紫色']]
        function buildTable(data,callback){
            var type = $(".sku-table thead tr th").length-3;
            /*头部插入***************************************/
            var head = '<th class="head-type" data-type="'+data[0]+'" data-length="'+data[1].length+'">规格'+type+':'+data[0]+'</th>';
            $("#thead-mark").before(head);
            /*
            * 制造盒子
            * */
            var length = data[1].length;

            /**TABLE FOR SAVE*********************************************/
            var arrData=[]; //过渡接受值数组
            for(var a=0;a<length;a++){
                arrData.push(data[1][a]) //将传入数组的第二项值遍历并存到arrData中
            }
            //console.log('aaa',arrData);
            tableSave[data[0]]=arrData; //将arrData赋给tableSave保存 颜色:红色,蓝色,紫色
            //console.log('tableSave',tableSave);
            /*************************************************************/
            //console.log('data...',data);

            if(type==1){
                var table='';
                for(var i=0;i<length;i++){
                    table+=
                        '<tr class="oldTr">' +
                        '<td class="firstTd" rowspan="1">'+ data[1][i]+'</td> ' +
                        '<td class="table-price">' +
                            '<input style="width: 120px" data-type="price" class="price-in-table form-control" minlength="1" type="number" pattern="^[0-9]+(.[0-9]{1,100})?$" placeholder="售价"/>' +
                            
                        '</td> ' +
                        '<td class="table-ori-price">' +
                            '<input style="width: 120px" data-type="ori_price" class="price-in-table form-control" minlength="1" type="number" pattern="^[0-9]+(.[0-9]{1,100})?$" placeholder="原价"/>' +
                            
                        '</td>' +
                        '<td class="table-quantity">' +
                            '<input style="width: 95px" data-type="quantity" class="price-in-table form-control" minlength="1" type="number" pattern="^[1-9]\\d*$" placeholder="库存"/>' +
                            
                        '</td> ' +
                        '<td>' +
                            '<img class="imgBoxBtn sku-icon" data-func="iconImg"/>' +
                        '</td> ' +
                        '</tr>' ;
                }
                //console.log(table);
                $(".sku-table").children("tbody").html(table);
            }
            /****************************************************/
            if(!(type==1)){
                var oldTr=$(".oldTr");
                oldTr.each(function () {
                    /*补全前面不显示*用于保存*/
                    var oldTdHtml;
                    $(this).children(".firstTd").each(function () {
                        oldTdHtml+='<td class="firstTd" rowspan="0" data-type="" style="display: none">'+$(this).text()+'</td>'
                    });

                    var newTr='';
                    for(var n=1;n<length;n++){
                        newTr+=
                            '<tr>' ;
                        newTr+=oldTdHtml;
                        newTr+=
                            '<td class="firstTd" rowspan="1">'+ data[1][n]+'</td> ' +
                            '<td class="table-price">' +
                            '<input style="width: 120px" data-type="price" class="price-in-table form-control js-pattern-number" minlength="1" type="number" pattern="^[0-9]+(.[0-9]{1,100})?$" placeholder="售价"/>' +
                            
                            '</td> ' +
                            '<td class="table-ori-price">' +
                            '<input style="width: 120px" data-type="ori_price" class="price-in-table form-control js-pattern-number" minlength="1" type="number" pattern="^[0-9]+(.[0-9]{1,100})?$" placeholder="原价"/>' +
                            
                            '</td>' +
                            '<td class="table-quantity">' +
                            '<input style="width: 95px" data-type="quantity" class="price-in-table form-control js-pattern-number" minlength="1" type="number" pattern="^[1-9]\\d*$" placeholder="库存"/>' +
                            
                            '</td> ' +
                            '<td>' +
                            '<img class="imgBoxBtn sku-icon" data-func="iconImg"/>' +
                            '</td> ' +
                            '</tr>' ;
                    }
                   $(this).after(newTr);
                });
                /**********************************/
                var td='<td class="firstTd" rowspan="1">'+ data[1][0]+'</td>';
                /***********************************/
                oldTr.each(function () {
                    /*更新rowspan*/
                    $(this).children(".firstTd").each(function () {
                       var  rowSpan = $(this).attr("rowspan");
                        $(this).attr("rowspan",rowSpan*length)
                    });
                    /*添加新的一行**********************************/
                    $(this).children(".table-price").before(td)
                });
                $(".sku-table").children("tbody").children("tr").attr("class","oldTr")
            }

            /*回调*******/
            if(callback){
                callback()
            }
        }

        //加上type标识
        function add_type_fnc(){
            var length = $('.sku-table').find('.head-type').length;
            for(var i = 0; i < length; i++){
                var type = $('.sku-table').find('.head-type:eq('+i+')').attr('data-type');
                $('.sku-table').find('.oldTr').find('.firstTd:eq('+i+')').attr('data-type',type);
            }
        }

	    function refresh_sku(){
            if(confirm("是否确认清空？")){
                var data ={
                   id : {$product.id}
                }
                $.post("{:U('Muushop/product',array('action'=>'delete_sku_table'))}",data,function(data){
                    //console.log(data);
                    if (data.status == 1) {
                        if (data.url) {
                            updateAlert(data.info + ' 页面即将自动跳转~', 'success');
                        } else {
                            updateAlert(data.info, 'success');
                        }
                        setTimeout(function () {
                            if (data.url) {
                                location.href = data.url;
                            } else if ($(that).hasClass('no-refresh')) {
                                $('#top-alert').find('button').click();
                            } else {
                                location.reload();
                            }
                        }, 2000);
                    }
                    location.reload();
                });
            }
	    }
    </script>
    
</block>